<template>
	<u-navbar :is-back="false" :custom-back="customBack" :border-bottom="borderBottom" :background="background">
		<view class="back-wrap d-flex a-center j-sb" @click="goBack()">
			<view class="back-container">
				<image class="back-img" :src="backImg" :style="{width:backImgSize.width+'rpx', height: backImgSize.height+'rpx'}" mode=""></image>
				<text class="back-text" :style="{color: backTextColor, fontSize: backTextSize+'rpx'}">{{ backText }}</text>
			</view>
			
			<view class="title-container overflow-line-1">
				<text :style="{color: titleColor, fontSize: titleSize+'rpx',fontWeight:titleWeight}">{{title}}</text>
			</view>
			<view class="right-container"></view>
		</view>
	</u-navbar>
</template>

<script>
	export default {
		props:{
			background:{
				type:Object,
				default: function() {
					return {
						backgroundColor: '#ffffff',
					}
				}
			},
			customBack: {
				type: Function,
				default: null
			},
			backImg:{
				type:String,
				default:'/static/images/public/back-black.png'
			},
		    backImgSize:{
				type: Object,
				default: function () {
					return {
						height:'32',
						width:'32'
					}
				}
			},
			backText:{
				type:String,
			},
			backTextColor: {
				type:String,
				default:'#333'
			},
			backTextSize: {
				type:String,
				default:'30'
			},
			title:{
				type:String,
				default:" "
			},
			titleColor: {
				type:String,
				default:'#333'
			},
			titleSize: {
				type:String,
				default:'34'
			},
			titleWeight:{
				type:String,
				default:'500'
			},
			borderBottom:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			goBack() {
				
			
					// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
					if (typeof this.customBack === 'function') {
						// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
						// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
						this.customBack.bind(this.$u.$parent.call(this))();
					} else {
						uni.navigateBack({
							fail:function(error){
								console.log("无法跳转页面",error)
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
						});
					}
			
			}
		}
	}
</script>

	
	
<style scoped>
	.back-wrap {
		position: relative;
		width: 750rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	
	}
	.back-img{
		
		/* margin-left: 14rpx; */
	}
	.title-container {
		text-align: center;
		/* background-color: red; */
	/* 	position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%); */
	/* 	width: 250rpx;
		height: 100%;
		margin: 0 auto;
		text-align: center; */
	}
</style>
